<template>
  <transition name="slide"> 
    <div class="page">
       <page-header title="我的参赛证"></page-header>
       <div class="card">
          <div class="avatar"><img :src="data.avatar || avatar"></div>
          <ul>
            <li><p>编号：<span>{{data.cardCode}}</span></p></li>
            <li><p>姓名：<span>{{data.cardName}}</span></p></li>
            <li><p>赛区：<span>{{data.cardArea}}</span></p></li>
          </ul>
          <p class="host">主办方：{{data ? data.host : ''}}</p>   
       </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import avatarInit from '../../assets/image/avatar.png'
export default {
  components: {
    PageHeader
  },
  data () {
    return {
      avatar: avatarInit,
      data: {}
    }
  },
  created() {
    this._initData()
  },
  methods: {
    _initData() {
      // 发送请求 mock
      let response = {
        token: '00001',
        username: null,
        phone: '12345678901',
        avatar: null,
        host: 'XXXXXXXXXXXXXXXXX',
        cardArea: '杭州',
        cardCode: '20180112',
        cardName: '王一'
      }
      this.data = response
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .page {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .card{
      position: relative;
      margin-top: 20px;
      width: 100%;
      height: 706px;
      background: url('../../assets/image/personal/card.png') no-repeat center / 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar{
        margin-top: 160px;
        width: 120px;
        height: 120px;
        background-color: #dddddd;
        border: solid 11px #ffffff;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      ul{
        margin-top: 40px;
        width: 100%;
        padding: 0 90px;
        box-sizing: border-box;
        li{
          width:100%;
          border-bottom: 2px solid rgba(255,255,255,0.3);
          p{
            padding-left: 5px;
            font-size: 30px;
            line-height: 80px;
            letter-spacing: 6px;
            color: #ffffff;
            font-family: 'SimSun';
            span{
              font-size: 34px;
              letter-spacing: 0px;
              font-family: 'PingFang SC';
            }
          }
        }
      }
      .host{
        position: absolute;
        left: 0;
        bottom: 30px;
        width: 100%;
        text-align: center;
        font-size: 22px;
        color: #ffffff;
      }
    }
  }
</style>
